<template>
  <div class="w-full h-full flex flex-col chat-page" ref="mianscroll">
    <div class="w-full">
      <order-nav>
        <template #left>
          <van-icon name="cross" class="font-700" color="#868D9A" />
        </template>
        <template #title>
          <div class="flex items-center">
            <img class="w-32 h-32" :src="replaceImgUrl(detail.c2cUserHeadImg)" alt="">
            <span class="ml-11 font-700 font-28">{{ detail.c2cUserNickName }}</span>
          </div>
        </template>
      </order-nav>
      <div class="pt-30 px-32 pb-32 tabBackground">
        <template v-if="detail.direction == 'buy'">
          <template v-if="detail.state == 0">
            <div class="font-40 c2cColor" v-if="time > 0">{{ $t('订单将在倒计时结束时取消。') }}&nbsp;<span class="text-blue">{{ time |
              format }}</span></div>

            <div class="font-40 c2cColor" v-else>{{ $t('您的订单已超时') }}</div>
            <van-count-down class="flex font-700 mx-10" :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
            <!-- <span class="block" v-if="time.hours">{{
              time.hours
            }}</span>
            <span class="colon" v-if="time.hours">:</span>
            <span class="block">{{ time.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ time.seconds }}</span> -->
          </template>
          <template v-else>
            <div class="font-40 font-600 c2cColor">{{ fixStrBuy() }}</div>
          </template>
        </template>
        <template v-else>
          <div class="font-40 c2cColor">{{ fixStrSell() }}</div>
        </template>
        <div class="flex justify-between items-center mt-31">
          <div class="font-26 text-black">
            <span class="text-grey">{{ $t('金额') }}</span>
            <span class="ml-14 c2cColor">{{ detail.currency }} {{ detail.amount && (detail.amount).toFixed(2) }}</span>
          </div>
          <div class="font-30 text-blue" @click="$router.push('/appeal')">{{ $t('举报') }}</div>
        </div>
        <van-button v-if="detail.direction == 'buy' && detail.state == 0" class="w-full mt-44 font-31 rounded-lg"
          color="#1D91FF" type="info" @click="gotoPay">{{ $t('去付款') }}</van-button>
      </div>
    </div>
    <div class="content flex-1 pb-200">
      <div class="flex flex-col px-32 box-border">
        <div class="w-full py-10 text-grey text-center pt-100" @click="onMore"
          :style="{ 'visibility': finished ? 'hidden' : 'visiable' }">
          {{ $t('历史消息') }}</div>
        <ul class="flex flex-col pt-20">
          <li v-for="(item, index) in list" :key="item.id" class="flex flex-col mt-20">
            <p class="font-26 text-center py-20 text-grey" v-if="showTime(index)">{{ item.createtime &&
              item.createtime.split(' ')[0] }}</p>
            <div class="flex" :class="item.send_receive === 'send' ? 'justify-end' : ''">

              <template v-if="item.send_receive === 'receive'">
                <img :src="replaceImgUrl(detail.c2cUserHeadImg)" class="w-81 h-81 mr-40" />
                <div class="responser bg-grey px-50 py-35 font-30 rounded-lg font-26 chatBg  bg-right"
                  style="border-radius: 20px 20px 20px 0">
                  <p class="break-word textColor" style="max-width: 230px; word-break: break-word;"
                    v-if="item.type === 'text'">{{ item.content }}</p>
                  <img v-else :src="replaceImgUrl(item.content)" class="w-200 h-200" @click="onPreview(replaceImgUrl(item.content))" />
                </div>
              </template>
              <div class="py-25 px-50 rounded-lg flex flex-col chatBg bg-right" style="border-radius: 20px 20px 0 20px"
                v-else>
                <img :src="`${replaceImgUrl(item.content)}`" class="w-200 h-200" v-if="item.type === 'img'"
                  @click="onPreview(replaceImgUrl(item.content))" />
                <p class="break-word textColor" v-else style="max-width: 230px; word-break: break-word;color: #fff">
                  {{ item.content }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <div class="flex-1 w-full overflow-auto bg-f5">
      <div class="w-full pt-43">
        <div class="font-24 text-grey text-center">2022-07-07 20：18：10</div>
        <div class="px-30 mt-45">
          <div class="flex items-end">
            <img class="w-64 h-64 mr-26" src="~@/assets/image/c2c/Group11762.png" alt="">
            <div class="h-100 pl-38 pr-52 py-32 box-border bg-white sell">{{$t('银行卡三天流水明细截图')}}</div>
          </div>
          <div class="flex justify-end mt-58">
            <div class="buyer bg-blue text-white py-32 px-48">{{$t('误划，取消！')}}</div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="fixed bottom-0 bottom-box left-0 w-full px-32 box-border pb-80">
      <div
        class="pl-30 flex justify-between relative w-full h-120 items-center pr-140 box-border rounded-xl tabBackground chat-input">
        <van-uploader :max-size="10000 * 1024" @oversize="onOversize" :after-read="afterRead">
          <img src="@/assets/image/service/photo.png" class="w-72 h-72" />
        </van-uploader>
        <input class="w-full h-full font-32 pl-40 inputBackground c2cColor" type="text" v-model="message"
          :placeholder="$t('请输入您的消息...')">

          <van-button  plain class="custom-button chat-icon right-34" :disable="isDisabled" @click="send('text', message)">
              <img src="@/assets/image/service/send.png" class="w-72 h-72" />
          </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Icon,
  Button,
  Uploader, ImagePreview,
  CountDown
} from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import { _uploadImage } from '@/API/fund.api'
import otcApi from "@/API/otc.js";
import {replaceImgUrl} from "@/utils/utis";

export default {
  name: "ChatIndex",
  props: ['type'], // 标识买家还是卖家
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    OrderNav,
    [Uploader.name]: Uploader,
    [CountDown.name]: CountDown,
  },
  data() {
    return {
      list: [],
      lastMsgId: '',
      finished: false, // 没有历史消息
      message: '',
      orderNo: '',
      detail: {},
      inter: null,
      timerData: null,
      time: '', // 剩余时间
      isDisabled: false,
      replaceImgUrl
    }
  },
  filters: {
    format(val) {
      return Math.floor(val / 60) + ':' + val % 60
    }
  },
  async created() {
    this.orderNo = this.$store.state.c2c.order_no
    const res = await otcApi.ctcOrderGetDetail({ order_no: this.orderNo, language: this.$i18n.locale });
    this.detail = res.data
    const { autoCancelTimeRemain } = this.detail
    this.time = autoCancelTimeRemain
    if (this.time > 0) {
      this.timerData = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          clearInterval(this.timerData)
        }
      }, 2000)
    }
    this.fetchList()
  },
  methods: {
    fixStrSell() {
      let str = ''
      if (this.detail.state == 0) {
        str = this.$t('等待买家付款')
      } else if (this.detail.state == 1) {
        str = this.$t('请放行')
      } else if (this.detail.state == 2) {
        str = this.$t('申诉中')
      } else if (this.detail.state == 3) {
        str = this.$t('已完成')
      } else if (this.detail.state == 4) {
        str = this.$t('已取消')
      } else if (this.detail.state == 5) {
        str = this.$t('已超时')
      }
      return str
    },
    fixStrBuy() {
      let str = ''
      if (this.detail.state == 1) {
        str = this.$t('等待卖家放行')
      } else if (this.detail.state == 2) {
        str = this.$t('申诉中')
      } else if (this.detail.state == 3) {
        str = this.$t('已完成')
      } else if (this.detail.state == 4) {
        str = this.$t('已取消')
      } else if (this.detail.state == 5) {
        str = this.$t('已超时')
      }
      return str
    },
    gotoPay() {
      if (this.detail.state == 0) {
        this.$router.push({ path: '/paymentBuy' })
      }
    },
    onOversize(file) {
      console.log(file);
      this.$toast(this.$t('文件大小不能超过10m'));
    },
    onPreview(url) { // 预览
      ImagePreview([url])
    },
    showTime(index) { // 时间显示
      if (index === 0) {
        return true
      }
      if (index === this.list.length - 1) {
        return false
      }
      if (this.list[index].createtime.split(' ')[0] === this.list[index + 1].createtime.split(' ')[1]) {
        return false
      }
    },
    afterRead(file) { // 文件上传
      this.$toast.loading({ duration: 0 })
      _uploadImage(file, (percent) => {
        console.log(percent)
      }).then(data => {
        this.$toast.clear()
        this.send('img', data)
      }).catch(() => {
        this.$toast.clear()
      })
    },
    fetchList(message_id = '') { // 获取消息列表
      otcApi.otcOnlinechatList({
        messageId: message_id,
        orderNo: this.detail.orderNo
      }).then(res => { // this.lastMsgId
        if (!this.lastMsgId) {
          this.lastMsgId = res.data.length && res.data[res.data.length - 1]['id']
        }
        if (res.data.length) {
          if (message_id) { // 加载更多
            this.lastMsgId = res.data[res.data.length - 1]['id']
            this.list = [...res.data.reverse(), ...this.list]
          } else {
            this.list = [...this.list, ...res.data.reverse()]
            let hash = {};
            this.list = this.list.reduce(function (preVal, curVal) {
              hash[curVal.id] ? ' ' : hash[curVal.id] = true && preVal.push(curVal);
              return preVal
            }, []);
          }
          if (res.data.length < 10) {
            this.finished = true
          }
        } else {
          this.list = []
        }
        if (!message_id) {
          this.clearInterval()
          this.inter = setInterval(() => {
            this.fetchList()
          }, 2000)
        }
      })

    },
    onMore() { // 加载更多
      this.fetchList(this.lastMsgId)
    },
    clearInterval() {
      if (this.inter) {
        clearInterval(this.inter)
        this.inter = null
      }
    },
    send(type = 'text', content = '') { // 发送消息, img 也当消息text
      if (!content) {
        this.$toast(this.$t('请输入消息内容'))
        return
      }

      if(!this.isDisabled){
        this.isDisabled = true; // 禁用按钮
        otcApi.otcOnlinechat({
          orderNo: this.detail.orderNo,
          type,
          content
        })
          .then(data => {
            console.log(data);
            this.message = '';
            this.fetchList();
            setTimeout(() => {
              this.bottomScrollClick();
            }, 2000);
            this.isDisabled = false; // 启用按钮
          })
          .catch(error => {
            console.error(error);
            this.isDisabled = false; // 启用按钮，即使出现错误也能再次点击
          });
      }
    },
    bottomScrollClick() {
      this.$nextTick(() => {
        let scrollEl = this.$refs.mianscroll;
        scrollEl.scrollTo({ top: scrollEl.scrollHeight + 400, behavior: 'smooth' });
      });
    }
  },
  beforeDestroy() {
    this.clearInterval()
  }
}
</script>

<style lang="scss" scoped>
.bg-left {
  background: #fff !important;
}

.bg-right {
  background: #1D91FF !important;
}

.sell {
  border-radius: 10.0022px 10.0022px 10.0022px 0;
}

.buyer {
  border-radius: 10.0022px 10.0022px 0 10.0022px;
  //transform: matrix(-1, 0, 0, 1, 0, 0);
}

.chat-input {
  input {
    border: none;
    outline: none;
  }
}
.chat-page{
  overflow: auto;
}

.chat-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.bottom-box{
  @include themify() {
    background: themed("main_background") !important;
  }
}

.custom-button {
  border: none;
  padding: 0 20px;
  background: none;
}

.custom-button:hover {
  background: none;
}

</style>
